<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Developed By M Abdur Rokib Promy">
<meta name="author" content="cosmic">
<meta name="keywords" content="Bootstrap 3, Template, Theme, Responsive, Corporate, Business">
<link rel="shortcut icon" href="${Prefix}images/favicon.png">
<title>
<#if Site.seoTitle?? && Site.seoTitle !="">${Site.seoTitle}<#else>${Site.name}</#if>
</title>

<link href="${Prefix}node_modules/animate.css/animate.min.css" rel="stylesheet" >
<link href="${Prefix}node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="${Prefix}node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="${Prefix}node_modules/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
<link href="${Prefix}node_modules/swiper/dist/css/swiper.min.css" rel="stylesheet" >

<link href="${Prefix}css/main.css" rel="stylesheet">
<link href="${Prefix}css/header.css" rel="stylesheet">
<link href="${Prefix}css/footer.css" rel="stylesheet">
<link href="${Prefix}css/search.css" rel="stylesheet">

<script src="${Prefix}node_modules/jquery/dist/jquery.min.js"></script>
<script src="${Prefix}node_modules/wowjs/dist/wow.min.js"></script>
<script src="${Prefix}node_modules/swiper/dist/js/swiper.min.js"></script>
<script src="${Prefix}node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${Prefix}node_modules/less/dist/less.js"></script>
<script src="${Prefix}node_modules/vue/dist/vue.js"></script>
<script src="${Prefix}node_modules/element-ui/lib/index.js"></script>


</head>
<body>
<@cms_include ssi="false"file="header.template.html"></@cms_include>

<div id="search-content">

	<div class="search-top">
		<div class="search-top-wrapper">
			<div class="search-input-wrapper"> 
				<el-input v-model="keywords" placeholder="请输入关键字查询" @keydown.enter="handleSearch"></el-input>
				<img src="${Prefix}images/i-2.png" id="search-1" @click="handleReset">
				<img src="${Prefix}images/i-1.png" id="search-2" @click="handleSearch">
			</div>
		</div>
	</div>
	
	<div class="container">
	  <div class="row">
		<div class="search-tips">
			<div class="text1">搜索结果</div>
			<div class="text2">
				与 “<span id="search-val-show">{{keywordsLast}}</span>” 相关的内容共计 <span id="span-total">{{total || '-'}}</span> 个
			</div>
		</div>
		<div id="div-result" class="search-result">
			<a v-for="(item,index) in dataList" :href="item.link" target="_blank" rel="noopener noreferrer">
				<div class="result-item">
					<div class="text1">标题：<span v-html="item.title"></span></div>
					<div class="text2">内容：<span v-html="item.fullText"></span></div>
					<div class="text3">所属栏目：{{item.catalogName}}</div>
				</div>
			</a>
		</div>
		<div style="text-align: right;padding: 40px 0;">
			<el-pagination
				v-if="total>0"
				@current-change="handleCurrentChange"
				background
				:current-page="currentPage"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>

	  </div>
	</div>

</div>

<@cms_include ssi="false"file="footer.template.html"></@cms_include>
<script>
	new Vue({
		el: '#search-content',
		data: function() {
			return {
				dataList: [],
				total: '',
				keywords:'',
				url: "${OtherPage}",
				pageSize: 10,
				keywordsLast:'',
				currentPage:"${(Request.page??&&Request.page?number gt 0)?then(Request.page,1)}" - 0
			}
		},
		mounted(){
			var q = "${Request.q!''}"; 
			this.queryResult(q);
			this.keywords = q
		},
		
		methods: {
			handleSearch(){
				this.handleCurrentChange(1)
			},
			handleCurrentChange(val){
				// http://192.168.2.11/prod-api/_search
				var link = "${IsPreview?then(ApiPrefix, Prefix)}_search${IsPreview?then('?sid='+Site.siteId+'&pp='+PublishPipeCode+'&preview=true', '')}";
				link += "?q=" + this.keywords
				link += "&Authorization=" + new URL(window.location.href).searchParams.get('Authorization')
				link += '&page='+val
				window.location.href = link
			},
			handleReset(){
				this.keywords = ''
				this.handleCurrentChange(1)
				// this.queryResult(this.keywords)
			},
			queryResult(q) {
				var that = this
				var params = new URLSearchParams(window.location.search);
				var pageSize = 10;
				var page = "${(Request.page??&&Request.page?number gt 0)?then(Request.page,1)}";
				$.ajax({
					url: "${ApiPrefix}api/cms/search/query?sid=${Site.siteId}&pp=pc&q=" + q + "&page=" + page,
					type: "get",
					headers: {
						"Authorization": new URL(window.location.href).searchParams.get('Authorization')
					},
					success: function(res) {
						that.dataList = res.data.rows
						that.total = res.data.total - 0
						that.keywordsLast = that.keywords
					}
				}) 
			}
		},
	})
	</script>
</body>
</html>